<template>
	<view class="zui-pop">
		<u-popup :show="the_show" :round="10" closeable mode="center" @close="do_close" @open="do_open">
			<view class="content">
				<view class="content_title">
					<view class="title">{{ title }}</view>
				</view>
				<scroll-view scroll-y="true" class="scroll">
					<view><slot></slot></view>
				</scroll-view>
				<view class="btn_bottom">
					<button @click="do_fun()" type="warning" :ripple="true" :border="false" class="anBtn">{{ btntit }}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	name:'zui_pop',
	props: {
		title:{
			type: String,
			default: '公告',
		},
		btntit:{
			type: String,
			default: '我已阅读并同意',
		},
		fun: {
			type: Function,
			default: () => {
				return Function;
			},
		},
	},
	data() {
		return {
			the_show:false
		}
	},
	onLoad(e) {

	},
	created: function() {

	},
	methods: {
		do_fun() {
			this.fun()
			this.the_show = false;
		},
		do_close() {
			this.the_show = false;
		},
		do_open() {
			this.the_show = true;
		}
	}
}
</script>
<style lang="scss" scoped>
.zui-pop {
	.content {
		position: relative;
		width: 620rpx;
		height: calc(100vh - 200rpx);

		.content_title {
			width: 620rpx;
			height: 100rpx;
			line-height: 100rpx;

			.title {
				width: 620rpx;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				margin: 0 auto;
			}
		}

		.scroll {
			height: calc(100vh - 420rpx);
			padding: 30rpx;
			box-sizing: border-box;
		}

		//底部按钮重置样式
		.btn_bottom {
			padding: 30rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			position: absolute;
			background: #fff;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			border-radius: 20rpx;
		}

		.anBtn {
			height: 100rpx;
			line-height: 100rpx;
			background: #504764;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			transform: scale(1);
			transition: all 0.25s;
			font-weight: bold;
		}

		.anBtn:active {
			transform: scale(0.9);
			background: #3a3050;
		}

		.anBtn::after {
			border: 0;
		}

		.anBtn[disabled] {
			color: #fff;
			background: #3a3050;
		}

		.anBtn[disabled]:active {
			transform: scale(1);
			color: #fff;
			background: #3a3050;
		}

		.anBtn[disabled]:not([type]) {
			transform: scale(1);
			color: #fff;
			background: #3a3050;
		}
	}
}
</style>
